<html lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://unpkg.zhimg.com/axios@1.0.0/dist/axios.min.js"></script>

<head>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
        crossorigin="anonymous">
    <meta name="generator">
    <title>online disk</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            font-family: Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
        }

        body {
            font-family: Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 30px;
            color: #777;
            background: #F6CECE;
        }

        .container {
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
            position: relative;
        }

        #contact input[type="text"],
        #contact input[type="email"],
        #contact input[type="tel"],
        #contact input[type="url"],
        #contact textarea,
        #contact button[type="submit"],
        #contact button[type="button"] {
            font: 400 12px/16px Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
        }

        #contact {
            background: #F9F9F9;
            padding: 25px;
            margin: 5px 0;
        }

        #contact1 {
            background: #F9F9F9;
            padding: 25px;
            margin: 0px 0;
        }

        #div {
            background: #F9F9F9;
            padding: 0px;
            margin: 10px 0;
        }

        #contact h3 {
            color: #F96;
            display: block;
            font-size: 20px;
            font-weight: 400;
        }

        #contact h4 {
            margin: 5px 0 15px;
            display: block;
            font-size: 13px;
        }

        fieldset {
            border: medium none !important;
            margin: 0 0 10px;
            min-width: 100%;
            padding: 0;
            width: 100%;
        }

        #contact textarea {
            width: 100%;
            border: 1px solid #CCC;
            background: #FFF;
            margin: 0 0 5px;
            padding: 10px;
        }

        #contact textarea:hover {
            -webkit-transition: border-color 0.3s ease-in-out;
            -moz-transition: border-color 0.3s ease-in-out;
            transition: border-color 0.3s ease-in-out;
            border: 1px solid #AAA;
        }

        #contact button[id="update"] {
            cursor: pointer;
            width: 100%;
            border: none;
            background: #FAAC58;
            color: #000;
            margin: 0 0 5px;
            padding: 10px;
            font-size: 15px;
        }

        #contact button[id="back"] {
            cursor: pointer;
            width: 100%;
            border: none;
            background: #00FF80;
            color: #000;
            margin: 0 0 5px;
            padding: 10px;
            font-size: 15px;
        }


        #contact a {
            outline: 0;
            /*border:1px solid #999;*/
            color: #642EFE;
            text-align: center;
            font-size: 1.6em;
            line-height: 1.3em;
        }

        #contact button[type="submit"]:hover {
            background: #09C;
            -webkit-transition: background 0.3s ease-in-out;
            -moz-transition: background 0.3s ease-in-out;
            transition: background-color 0.3s ease-in-out;
        }

        #contact button[type="submit"]:active {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        #contact input:focus,
        #contact textarea:focus {
            outline: 0;
            border: 1px solid #999;
        }

        #contact textarea {
            height: 300px;
            max-width: 100%;
            resize: none;
        }

    </style>
</head>

<body>
    <div class="container">
        <div id="contact">
            <h2>Light Monitor</h2>
            <button type="button" id="update" onclick="updateData();">Update</button>
            <button type="button" id="back" onclick="confirmData();">Confirm</button>
            <textarea id="text"></textarea>
        </div>
    </div>
</body>
<script src="https://unpkg.com/sweetalert2@11"></script>
<script charset="utf-8">
    function updateData() {
        axios.get('/api/monitro/list')
            .then(function (response) {
                console.log(response.data);
                document.getElementById("text").value = JSON.stringify(response.data, null, 4);
            })
            .catch(function (error) {
                if (error.response.status === 401) {
                    Swal.fire({
                        title: "请输入密码",
                        input: 'password',
                        showCancelButton: false,
                        confirmButtonText: '确认',
                        inputAttributes: {
                            autocapitalize: 'off'
                        },
                        showLoaderOnConfirm: true,
                        preConfirm: (password) => {
                            axios.defaults.headers.common['Authorization'] = password;
                        },
                        allowOutsideClick: () => !Swal.isLoading()
                    });
                } else if (error.response.status === 403) {
                    alert("密码错误频繁,等一会再输入");
                    location.reload();
                    return false;
                } else {
                    console.log(error);
                    alert("error", error);
                }
            });
    }

    function confirmData() {
        var data = document.getElementById("text").value;
        axios.post('/api/monitor/confirm', data)
            .then(function (response) {
                console.log(response.data);
                alert("success");
            })
            .catch(function (error) {
                console.log(error);
                alert("error", error);
            });
    }

    updateData();
</script>

</html>
